Код HTML:
<!DOCTYPE html><!--html5-->
<html lang="ru"><!--html для русских-->
<head><!--метаданные страницы-->
<meta charset="utf-8"/><!--кодировка-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--><!--для IE правильный скрипт-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!--предпочтения браузера-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!--начальный масштаб для не адаптивных страниц-->
<META NAME="AUTHOR" CONTENT="Alexander Kosolapov">
<title>Слайдер на чистом CSS</title><!--имя страницы-->
<meta name="description" content="Слайдер на чистом CSS"/><!--для поисковых систем-->
<link rel="stylesheet" type="text/css" href="css/style.css"/><!--подключение стилей-->
<STYLE TYPE="text/css">
<!--
@page { margin: 0.5in }
P { margin-bottom: 0.08in; direction: ltr; widows: 2; orphans: 2 }
A:link { color: #0000ff; so-language: zxx }
-->
</STYLE>
</head><!--закрытие метатегов-->
<body><!--тело страницы-->
<div class="container"><!--сам контейнер -->
<section class="cr-container">
<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
<label for="select-img-1" class="cr-label-img-1">1</label>
<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
<label for="select-img-2" class="cr-label-img-2">2</label>
<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
<label for="select-img-3" class="cr-label-img-3">3</label>
<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
<label for="select-img-4" class="cr-label-img-4">4</label>
<input id="select-img-5" name="radio-set-1" type="radio" class="cr-selector-img-5" />
<label for="select-img-5" class="cr-label-img-5">5</label>
<div class="cr-bgimg">
</div>
<div class="cr-titles">
<h3><span>Отопление</span><span>Автоматизированные Тепловые Пункты</span></h3>
<h3><span>Вентиляция</span><span>Рекуператоры, Центральные Каркасно-Панельные установки</span></h3>
<h3><span>Водоснабжение</span><span>Насосные станции нового поколения</span></h3>
<h3><span>Газоснабжение</span><span>Инновационая Система Контроля Загазованности</span></h3>
<h3><span>Металлоконструкции</span><span>Резервуары и другое оборудование</span></h3>
</div>
</section>
</div><!--закрытие контейнер для слайдера-->
</body><!--закрытие тела страницы-->
</html><!--закрытие кода-->
Код CSS:
@charset "utf-8";
.container{/*контейнер вывода слайдера*/
height:300px;/*высота блока*/
text-align:center;/*текст по центру блока*/
width:399px;/*ширина блока*/
}
.cr-container{/*контейнер слайдера*/
border:20px solid #f8f8f8;/*свойства рамки*/
box-shadow:1px 1px 3px rgba(0,0,0,.7);/*тень блока*/
height:300px;/*высота блока*/
position:absolute;/*позиционирование абсолютное*/
width:399px;/*ширина блока*/
}
.cr-container label{/*блоки выбора слайда*/
color:#fff;/*цвет чисел*/
cursor:pointer;/*курсор как указатель*/
font:italic 1em 'Times new roman',Arial;/*свойства шрифта*/
float:left;/*примыкание контейнера слева*/
height:1.5em;/*высота блока*/
position:relative;/*позиция варьируется*/
top:270px;/*отступ свеху*/
width:19.4%;/*ширина блока*/
z-index:10;/*верхний слой*/
}
.cr-container label:before{/*контент всех кнопок выбора слайда*/
background:rgba(0,204,255,.9);/*цвет круглой кнопки и прозрачность*/
box-shadow:0 0 0 4px rgba(255,255,255,.5);/*тени круглой кнопки до нажатия*/
border-radius:50%;/*радиус бордюра - кнопки круглые*/
content:'';/*контент*/
height:20px;/*высота блока кнопки*/
left:40%;/*расположение кругов слева*/
position:absolute;/*позиционирование абсолютное*/
width:20px;/*ширина блока кнопки*/
z-index:-1;/*нижний слой*/
}
.cr-container label:after{/*полоски*/
width:1px;/*ширина*/
height:300px;/*высота*/
content:'';/*контент*/
background:gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
background:-moz-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
background:-o-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
background:-ms-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));/*градиент*/
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0ff', endColorstr='#fff',GradientType=0 );/*фильтр Майкрософт*/
position:absolute;/*позиция абсолютная*/
bottom:-6px;/*отступает от родителя до конца вниз*/
right:0;/*расположение справа*/
}
/*классы выбора кнопок и показа картинок выбранное пользователем*/
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4,
.cr-container input.cr-selector-img-5:checked ~ label.cr-label-img-5{
color:#0cf;/*цвет числа нажатой кнопки*/
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before,
.cr-container input.cr-selector-img-5:checked ~ label.cr-label-img-5:before{
background:#fff;/*цвет нажатой круглой кнопки*/
box-shadow:0 0 0 4px rgba(0,204,255,.7);/*тень блока*/
}
.cr-container input{
display:none;/*контейнер выбора не виден*/
}
.cr-bgimg{/*контейнер вывода картинки*/
background-repeat:no-repeat;/*картинка без повтора*/
width:400px;/*ширина блока*/
height:300px;/*высота блока*/
position:absolute;/*позиционирование абсолютное*/
z-index:1;/*слой 1*/
}
/*контейнеры картинок вывода*/
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg{
background-image:url("../img/1.jpg");
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg{
background-image:url("../img/2.jpg");
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg{
background-image:url("../img/3.jpg");
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg{
background-image:url("../img/4.jpg");
}
.cr-container input.cr-selector-img-5:checked ~ .cr-bgimg{
background-image:url("../img/5.jpg");
}
/*скорость трансформации разделов текста*/
.cr-container input:checked ~ .cr-bgimg div span{
-webkit-animation:scaleOut .3s ease-in-out;
-moz-animation:scaleOut .3s ease-in-out;
animation:scaleOut .3s ease-in-out;
}
/*прозрачность трансформации разделов текста в браузерах*/
@-webkit-keyframes scaleOut{
0%{-webkit-transform:scale(1);opacity:1;}
100%{-webkit-transform:scale(1.5);opacity:0;}
}
@-moz-keyframes scaleOut{
0%{-moz-transform:scale(1);opacity:1;}
100%{-moz-transform:scale(1.5);opacity:0;}
}
@-o-keyframes scaleOut{
0%{-o-transform:scale(1);opacity:1;}
100%{-o-transform:scale(1.5);opacity:0;}
}
@-ms-keyframes scaleOut{
0%{ -ms-transform: scale(1); opacity: 1; }
100%{ -ms-transform: scale(1.5); opacity: 0; }
}
@keyframes scaleOut{
0%{ transform: scale(1); opacity: 1; }
100%{ transform: scale(1.5); opacity: 0; }
}
/*привязка классов трансформации разделов текста вместе с картинками*/
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4),
.cr-container input.cr-selector-img-5:checked ~ .cr-bgimg div span:nth-child(5)
{
-webkit-transition:-webkit-transform .3s ease-in-out, opacity .3s ease-in-out, z-index 0s linear .4s;
-moz-transition:-moz-transform .3s ease-in-out, opacity .3s ease-in-out, z-index 0s linear .4s;
transition:transform .3s ease-in-out, opacity .3s ease-in-out, z-index 0s linear .4s;
-webkit-animation:none;
-moz-animation:none;
animation:none;
opacity:1;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-ms-transform: scale(1);
transform:scale(1);
z-index:10;
}
.cr-titles h3{/*свойства текста на ленте*/
font:bold 1em times new roman,arial;/*свойства шрифта*/
color:#fff;/*цвет букв*/
text-shadow:1px 1px 1px rgba(0,0,0,.1);/*свойства тени текста*/
}
.cr-titles h3 span{
font:bold 1em times new roman,arial;/*свойства шрифта*/
left:0;/*расположение слева*/
opacity:0;/*видимости изначально нет*/
position:absolute;/*позиционирование абсолютное*/
text-align:center;/*текст по центру*/
width:100%;/*ширина блока*/
z-index:10;/*верхний слой*/
}
.cr-titles h3 span:nth-child(1){/*главный заголовок*/
color:#ff0;/*цвет главный заголовок*/
font:bold 1.8em times new roman,arial;/*заголовка шрифт жирный размер имя*/
letter-spacing:5px;/*расстояние между символами*/
text-shadow:3px 3px 3px rgba(255,255,255,.5);/*свойства тени текста*/
top:60%;/*расположение сверху*/
-webkit-transition:text-shadow 0.7s ease-in-out, opacity 0.7s ease-in-out;
-moz-transition:text-shadow 0.7s ease-in-out, opacity 0.7s ease-in-out;
transition:text-shadow 0.7s ease-in-out, opacity 0.7s ease-in-out;/*трансформация текста*/
}
.cr-titles h3 span:nth-child(2){
background:rgba(0,204,255,.8);/*цвет ленты и прозрачность*/
font:bold italic 0.8em arial;/*свойства шрифта на ленте*/
letter-spacing:0;/*расстояние между символами*/
padding:5px 0;/*внутренние отступы*/
top:74%;/*отступ ленты от верха*/
-webkit-transition: opacity .8s ease-in-out;
-moz-transition: opacity .8s ease-in-out;
transition: opacity .8s ease-in-out;/*трансформация появления*/
}
.cr-container input:checked ~ .cr-titles h3 span{
opacity:0;/*изначально видимости нет*/
text-shadow:1px 1px 25px #000;/*свойства тени текста на ленте*/
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1),
.cr-container input.cr-selector-img-5:checked ~ .cr-titles h3:nth-child(5) span:nth-child(1){
opacity:1;/*полная видимость*/
text-shadow:0px 0px 1px #fff;/*свойства тени текста на ленте*/
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2),
.cr-container input.cr-selector-img-5:checked ~ .cr-titles h3:nth-child(5) span:nth-child(2){
opacity:1;/*полная видимость*/
}